<template>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column v-for="date in dates" :key="date" :label="date" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.schedule[date]">
              <div v-if="scope.row.schedule[date].morning">早班</div>
              <div v-if="scope.row.schedule[date].afternoon">中班</div>
              <div v-if="scope.row.schedule[date].evening">晚班</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: '张三',
            schedule: {
              '2022-01-01': { morning: true, afternoon: false, evening: true },
              '2022-01-02': { morning: false, afternoon: true, evening: false },
              '2022-01-03': { morning: true, afternoon: true, evening: false },
              '2022-01-04': { morning: true, afternoon: true, evening: false },
              '2022-01-05': { morning: true, afternoon: true, evening: false },
              '2022-01-06': { morning: true, afternoon: true, evening: false },
              '2022-01-07': { morning: true, afternoon: true, evening: false },
              '2022-01-08': { morning: true, afternoon: true, evening: false },
              '2022-01-09': { morning: true, afternoon: true, evening: false },
              '2022-01-10': { morning: true, afternoon: true, evening: false },
              '2022-01-11': { morning: true, afternoon: true, evening: false },
              '2022-01-12': { morning: true, afternoon: true, evening: false },
            },
          },
          {
            name: '李四',
            schedule: {
              '2022-01-01': { morning: false, afternoon: true, evening: false },
              '2022-01-02': { morning: true, afternoon: false, evening: true },
              '2022-01-03': { morning: false, afternoon: false, evening: true },
            },
          },
        ],
      };
    },
    computed: {
      dates() {
        const dates = new Set();
        this.tableData.forEach((item) => {
          Object.keys(item.schedule).forEach((date) => {
            dates.add(date);
          });
        });
        return Array.from(dates).sort();
      },
    },
  };
  </script>
<style lang="scss" scoped>
::v-deep .el-table th{
    background: #007aff !important;
}
</style>
